import styled from '@emotion/styled';
import React from 'react';
import { useBusiness } from '../Context/BusinessContext';
import { IBusinessName, IBusinessStatus } from '@/views/Context/BusinessContext';
import { useTranslation } from 'react-i18next';

const Container = styled.div`
	width: 100%;
	height: 100%;
	z-index: 9999;
	top: 0;
	position: absolute;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	display: ${(props: { sharePdfBtnStatus: string }) => (props.sharePdfBtnStatus === 'stow' ? 'block' : 'none')};
`;

const PDFIframeWrapper = styled.div`
	width: 850px;
	height: 660px;
	max-height: calc(100vh - 50px);
	background: #2f2f2f;
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.19);
	border-radius: 4px;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	iframe {
		border: none;
	}
`;
const PDFIframe = styled.div`
	width: 850px;
	height: calc(100% - 50px);
	background: #2f2f2f;
	box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.19);
	border-radius: 4px;
	position: fixed;
    top: 0;
    left: 0;
	iframe {
		border: none;
	}
`;

const FooterBox = styled.div`
	height: 48px;
	background: #fdfeff;
	border-radius: 0px 0px 4px 4px;
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: end;
`;

const MinimizeBtn = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	width: 101px;
	height: 36px;
	background: #ffffff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius: 21px;
	cursor: pointer;
`;

const MinimizeText = styled.span`
	font-size: 14px;
	color: #2d2d2d;
`;

const EndBtn = styled.div`
	display: flex;
	align-items: center;
	justify-content: center;
	width: 101px;
	height: 36px;
	background: #ffffff;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius: 21px;
	margin-left: 18px;
	cursor: pointer;
	margin-right: 25px;
`;

const EndText = styled.span`
	color: #de0112;
	font-size: 14px;
`;

const IconSvg = styled.span`
	display: flex;
	padding: 0 4px;
	vertical-align: middle;
`;

const index = () => {
	const { t } = useTranslation();
	const { sharePdfBtnStatus, setSharePdfBtnStatus, BusinessTaskMap, cancelBusiness } = useBusiness();
	const endWhiteBoard = async () => {
		const data = BusinessTaskMap.findTaskWithTaskName(IBusinessName.SHARED_PDF);
		data.forEach(item => {
			if (item.status === IBusinessStatus.IN_PROGRESS) {
				cancelBusiness(item.clientId, IBusinessName.SHARED_PDF);
			}
		});
	};
	const minWhiteBoard = () => {
		setSharePdfBtnStatus('open');
	};
	return (
		<Container sharePdfBtnStatus={sharePdfBtnStatus()}>
			<PDFIframeWrapper>
				<PDFIframe id="pdf-iframe">
				</PDFIframe>
				<FooterBox>
						<MinimizeBtn onClick={minWhiteBoard}>
							<IconSvg className="widget-icon" aria-hidden="true">
								<svg style={{ width: '14px', height: '14px' }}>
									<use xlinkHref={'#icon-widget-zuixiaohua'}></use>
								</svg>
							</IconSvg>
							<MinimizeText>{t('minimize')}</MinimizeText>
						</MinimizeBtn>
						<EndBtn onClick={endWhiteBoard}>
							<IconSvg className="widget-icon" aria-hidden="true">
								<svg style={{ width: '14px', height: '14px' }}>
									<use xlinkHref={'#icon-widget-jieshubaiban'}></use>
								</svg>
							</IconSvg>
							<EndText>{t('end-sharing')}</EndText>
						</EndBtn>
					</FooterBox>
			</PDFIframeWrapper>
		</Container>
	);
};

export default index;
